 <template>
    <view class="zai-box">
        <scroll-view scroll-y class="page">
            <view class="zdbLogoView" style="text-align: center;" :style="[{animation: 'show ' + 0.4+ 's 1'}]">
				<image src="/static/zdbLogo.png" mode='aspectFit' class="zai-logo"></image>
			</view>
            <view class="box loginMain padding-lr-xl login-paddingtop" :style="[{animation: 'show ' + 0.6+ 's 1'}]">

                <view class="">
					<view class="accountText">账号</view>
                     <input class="accountInput" placeholder="请输入您的账号" name="input" v-model="userName"></input>
                </view>
                <view class="">
					<view class="accountText">密码</view>
                   <input class="accountInput" placeholder="请输入密码" name="input" type="password" v-model="password"></input>
                </view>
				<!-- <view class="rememberPwd">记住密码</view> -->
                <view class="padding  flex  flex-direction">
                    <button class="cu-btn bg-blue shadow-blur lg" :loading="loading"
                            @tap="onLogin"> {{loading ? "登录中...":"登 录"}}
                    </button>
                </view>
				<!-- #ifdef APP-PLUS -->
				<!-- <view class="padding flex flex-direction  text-center  ">
						当前版本:{{version}}
				</view> -->
				<!-- #endif -->
				
            </view>
        </scroll-view>
		<!-- 登录加载弹窗 -->
		<view class="cu-load load-modal" v-if="loading">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="/static/logo.png" mode="aspectFit"></image>
			<view class="gray-text">登录中...</view>
		</view>
		<!-- <my-image-upload></my-image-upload>
		<my-select></my-select> -->
		<!-- <my-page></my-page> -->
    </view>

</template>

<script>
	import { ACCESS_TOKEN,USER_NAME,USER_INFO } from "@/common/util/constants"
	import { mapActions } from "vuex"
	import myImageUpload from "@/components/my-componets/my-image-upload.vue"
	import mypage from "@/components/my-componets/my-page.vue"
	import myselect from "@/components/my-componets/my-select.vue"
	
    export default {
		components:{
			'my-image-upload':myImageUpload,
			'my-select':myselect
		},
        data() {
            return {
				loading: false,
				userName: '',
				password: '',
				phoneNo: '',
				smsCode: '',
				showPassword: false, //是否显示明文
				loginWay: 1, //1: 账密，2：验证码
				smsCountDown: 0,
				smsCountInterval: null,
				toggleDelay: false,
				version:''
            };
        },
		onLoad:function(){
			// #ifdef APP-PLUS
			var that=this
			plus.runtime.getProperty( plus.runtime.appid, function ( wgtinfo ) {
					that.version=wgtinfo.version
				} );
			// #endif
		},
        methods: {
			 ...mapActions([ "mLogin","PhoneLogin" ]),
			
			onLogin: function (){
			        if(!this.userName || this.userName.length==0){
			          this.$tip.toast('请填写用户名');
			          return;
			        }
			        if(!this.password || this.password.length==0){
			           this.$tip.toast('请填写密码');
			          return;
			        }
			        let loginParams = {
			          username:this.userName,
			          password:this.password
			        }
					this.loading=true;
			        this.mLogin(loginParams).then((res) => {
					  console.log("mLogin",res)
					  console.log(res.data.result.userInfo.roleType)
					  let roleType = res.data.result.userInfo.roleType;
					  uni.setStorage({
					  	key:"roleType",
						data:roleType,
						success() {
							console.log("success")
						}
					  })
					  this.loading=false;
			          if(res.data.success){
						  this.$tip.success('登录成功!')
						  this.$Router.replaceAll({name:'index'})
						 /* uni.reLaunch({
							url: '/pages/index/index'
						  }); */
						  
			          }else{
			              this.$tip.alert(res.data.message);
			          }
			        }).catch((err) => {
						console.log(err)
			         // let msg = err.data.message || "请求出现错误，请稍后再试"
					 let msg = "账号密码不正确"
			          this.$tip.alert(msg);
			        }).finally(()=>{
					  this.loading=false;
					})
			      }
        }
    }
</script>

<style>
	body.pages-login-login uni-page-body{
		height: 100%;
	}
    .login-paddingtop {
        padding-top: 200 upx;
    }
	
    .zai-box {
        padding: 0 20 upx;
        padding-top: 100 upx;
        position: relative;
		height: 100%;
		/* background-image: url(/static/background.png); */
    }
	.page{
		height: 100%;
		padding-top: 42px;
		font-family: "my-font";
	}
	.zdbLogoView{
		width: 100%;
		height: 50px;
	}
	.loginMain{
		margin-top: 35px;
	}
    .zai-logo {
        width: 306px;
        height: 50px;
    }
	.accountView{
		width: 100%;
	}
	.accountText{
		width: 100%;
		height: 56px;
		line-height: 56px;
		color: #232323;
		font-size: 18px;
	}
	.accountInput{
		width: 335px;
		height: 56px;
		line-height: 56px;
		background-color: #F5F6F7;
		padding-left: 19px;
	}
	.accountInput::-webkit-input-placeholder{
		color: #65707D;
	}
	.rememberPwd{
		height: 56px;
		line-height: 56px;
		color: #28435D;
		font-size: 14px;
		padding-left: 22px;
	}
    .input-placeholder, .zai-input {
        color: #333333;
    }

    .zai-label {
        padding: 60 upx 0;
        text-align: center;
        font-size: 30 upx;
        color: #a7b6d0;
    }

    .zai-btn {
        background: #ff65a3;
        color: #fff;
        border: 0;
        border-radius: 100 upx;
        font-size: 36 upx;
    }

    .zai-btn:after {
        border: 0;
    }

    /*按钮点击效果*/
    .zai-btn.button-hover {
        transform: translate(1 upx, 1 upx);
    }

</style>
